<!--  -->
<template>
  <div>角色管理
    <el-button  type="primary"  @click="handleAdd" size="small">添加</el-button>

    <el-table :data="state.list" style="width:100%">
        <el-table-column  prop="id" label="ID"  width="60" />
    <el-table-column   prop="name" label="角色名称" />
 
    <el-table-column fixed="right" label="操作" width="220">
      <template #default="scope">
        <el-button  type="primary" size="small" @click="handleDel(scope.row.id)"
          >删除</el-button
        >
        <el-button  type="primary"  @click="handleEdit(scope.row.id)" size="small">修改</el-button>
      </template>
    </el-table-column>
  </el-table>
  <RoleAdd :id="editId" @close="handleClose" v-if="isAdd"></RoleAdd>
  </div>
</template>

<script lang='ts' setup>
import RoleAdd from './RoleAdd.vue';
import { reactive,toRefs,ref,onMounted} from 'vue'
import {getList} from '../services/role/role'

const editId=ref(0);

const isAdd=ref(false);
const state=reactive({
    list:[]
})

const params=reactive({
    page:1,psize:10
})
const getData=async ()=>{

     const res:any=await getList(params);
     if(res.errCode===10000){
        state.list=res.data.list;
     }
}
const handleDel=(id:number)=>{
    alert(id);

}
const handleEdit=(id:number)=>{
    editId.value=id;
    isAdd.value=true;

}
onMounted(()=>{

    getData();
})
const handleAdd=()=>{
    editId.value=0;
    isAdd.value=true;
}
const handleClose=(isLoad:boolean)=>{
    isAdd.value=false;
    if(isLoad){
      
        getData();
    }
}
</script>
<style scoped>
</style>